<extend name="Common/layout" />

<block name="title">
    <title>后台管理-路线编辑</title>
</block>

<block name="css">

    <link href="__PUBLIC__/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/webuploader.css">
    <link href="__PUBLIC__/css/addPage.css" rel="stylesheet">
</block>

<block name="left">

</block>

<block name="content">

    <script type="text/javascript" src="__PUBLIC__/js/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="__PUBLIC__/js/datetimepicker/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

    <div class="panel panel-default">

        <div class="panel-heading">基本信息</div>

        <div class="panel-body">

            <div class="form-group col-xs-12">
                <label class="col-xs-1 form-control-static" >路线名称<span style="color: red;">*</span>:</label>
                <div class="col-xs-11">
                    <input type="text" class="col-xs-12 form-control-static" placeholder="输入活动名称/标题(4~60)" id="name" maxlength="60"  value="{:isset($name)?$name:''}">
                </div>
            </div>

            <!--<div class="form-group col-xs-12">-->
                <!--<label class="col-xs-1 form-control-static" >选择时间<span style="color: red;">*</span>:</label>-->
                <!--<div class="col-xs-4">-->
                    <!--<div class="input-group" style="margin-bottom: 20px;">-->
                        <!--<span class="control-label input-group-addon">开始时间</span>-->
                        <!--<input placeholder="请输入日期" class="form-control" id="start_time"  value="{:isset($starttime)?$starttime:''}">-->
                    <!--</div>-->
                    <!--<div class="input-group">-->
                        <!--<span class="control-label input-group-addon">结束时间</span>-->
                        <!--<input placeholder="请输入日期" class="form-control" id="end_time"  value="{:isset($endtime)?$endtime:''}">-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div id="datepicker"></div>-->
            <!--</div>-->

            <div class="form-group col-xs-12">
                <label class="col-xs-1 form-control-static">活动人数<span style="color: red;">*</span>:</label>
                <div class="col-xs-2">
                    <input class="form-control" placeholder="活动人数" type="number" id="num"  value="{:isset($members)?$members:''}">
                </div>
            </div>

            <div class="form-group col-xs-12">
                <label class="col-xs-1 form-control-static">主办单位<span style="color: red;">*</span>:</label>
                <div class="col-xs-5">
                    <input value="{:isset($company)?$company:''}" class="form-control" placeholder="主办单位" id="company">
                </div>
            </div>

            <div class="form-group col-xs-12">
                <label class="col-xs-1 form-control-static">排序<span style="color: red;">*</span>:</label>
                <div class="col-xs-2">
                    <input value="{$sort}" class="form-control" placeholder="排序" type="number" id="sort">
                </div>
            </div>

            <div class="form-group col-xs-12">
                <label class="col-xs-1 form-control-static">是否展示<span style="color: red;">*</span>:</label>
                <div class="col-xs-5">
                    <select name="" id="status">
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                </div>

            </div>
            <!--<div class="form-group col-xs-12">-->
                <!--<label class="col-xs-1 form-control-static">样式选择<span style="color: red;">*</span>:</label>-->
                <!--<div class="col-xs-1">-->
                    <!--<select name="" id="model" onchange="changemodel('{$id}')">-->
                        <!--<option value="0">默认</option>-->
                        <!--<option value="1">1</option>-->
                        <!--<option value="2">2</option>-->
                        <!--<option value="3">3</option>-->
                    <!--</select>-->
                <!--</div>-->
                <!--<div class="col-sm-1">-->
                    <!--<a ><button class="btn btn-info" onclick="javascript: var id ='{$id}' ;openModal(id);">预览</button></a>-->
                <!--</div>-->
                <!--<div class="col-sm-1">-->
                    <!--<a id="open" href="{:U('Home/Route/readRoute')}?id={$id}" target="_blank"><button class="btn btn-info">查看</button></a>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            上传海报
        </div>
        <div class="panel-body">
            <div style="width: 480px;height: 280px;padding: 0px;margin:30px;float: left;" id="load">

                <div  class="placeholder" style="padding: 0px;">
                    <img id="image"  style="margin: 0px;padding: 0px; max-width: 100%;max-height: 100%"  src="__PUBLIC__/uploads/routeImage/{:isset($img_url)?$img_url:''}"/>
                </div>

            </div>

            <div style="padding: 30px;">
                <!--<button class="btn btn-primary btn-lg col-xs-2" id="picker"><span class="glyphicon glyphicon-open"></span>&nbsp;&nbsp;上传</button><br><br><br><br/><br/><br/><br/>-->
                <div id="picker" class="col-xs-4 input-group"><span class="glyphicon glyphicon-open "></span>&nbsp;&nbsp;上传</div>
                <span style="color:#A0A0A0 ;">建议:<br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图片尺寸:不小于1080*640px;<br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图片大小:不超过3M<br/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 图片格式:png,jpg,bmp;<br/>
                </span>

            </div>
        </div>

    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            详细信息
        </div>
        <div class="panel-body" style="margin: 20px;">

            <script type="text/plain" id="myEditor" name="content"></script>

        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-body" >
            <button class="btn btn-success col-xs-1 col-lg-offset-5" onclick="save()">发布</button>
            &nbsp;
            <button class="btn btn-default">草稿</button>
        </div>
    </div>
    </div>

    <div style="height: 200px;">

    </div>

    <div class="modal fade" id="showMessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal_wrapper">
            <div class="modal-dialog" style="width: 1300px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel_edit">路线详情</h4>
                    </div>
                    <div class="modal-body">
                        <iframe src="" frameborder="0" id="routeMessage" style="width: 100%; height: 600px"></iframe>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</block>

<block name="js">

    <script type="text/javascript" src="__PUBLIC__/js/webuploader.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/PCASClass.js"></script>
    <script type="text/javascript">
        $('#status').val('{$status}');
//        $('#model').val('{$model}');
        var img = '';
        var sort = 0;
        var editor = new baidu.editor.ui.Editor({initialFrameHeight:400});
        editor.render("myEditor");
        editor.setOpt('autoHeight',false);

        editor.addListener("ready", function () {

            editor.setContent('{:isset($text)?$text:""}');

        });

        var imageFieName = '';

//        $('#start_time').datetimepicker({
//            //language:  'fr',
//            weekStart: 1,
//            todayBtn:  1,
//            autoclose: 1,
//            todayHighlight: 1,
//            startView: 2,
//            forceParse: 0,
//            showMeridian: 1
//        });

//        $('#end_time').datetimepicker({
//            //language:  'fr',
//            weekStart: 1,
//            todayBtn:  1,
//            autoclose: 1,
//            todayHighlight: 1,
//            startView: 2,
//            forceParse: 0,
//            showMeridian: 1
//        });

        var uploader,
                ratio = window.devicePixelRatio || 1,
                thumbnailWidth = 480 * ratio,
                thumbnailHeight = 280 * ratio;

        uploader = WebUploader.create({
            auto:true,
            resize:false,
            duplicate:true,
            server:"{:U('Route/uploadImg')}",
            pick:'#picker',
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
//             fileNumLimit:1,
            filesizeLimit:3
        });

        uploader.on( 'fileQueued', function( file ) {

            sort = parseInt(sort+1);
            uploader.option('formData', {
                'id1':new Date().getTime(),
                'sort':parseInt(sort)
            });

            $img = $('#image');

            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );


        });

        uploader.on('uploadSuccess',function(){
            
        });

        uploader.on('uploadAccept',function(object,ret){

//            if(sort == ret.sort){
                imageFieName = ret;
//                img = imageFieName;

//                imageFieName = ret;
//                img = imageFieName;
//                id = $_GET['id'];
//                mo = $('#model').val();
//                $('#open').attr('href',"{:U('Home/Route/readRoute')}?id="+id+"&mo="+mo+"&url="+img);
//            }

        });

        function save(){

            var     id          = $_GET['id'],
                    name        = $('#name').val(),
//                    start_time  = $('#start_time').val(),
//                    end_time    = $('#end_time').val(),
                    num         = parseInt($('#num').val()),
                    orginazition=  $('#company').val(),
                    status = $('#status').val(),
                    sort = $('#sort').val();
//                    model = $('#model').val();


            if(name.length<1 || name.length>60){
                alert("活动名称(1~60)以内");
                return;
            }

//            if(start_time == '' || end_time == ''){
//                alert('活动时间格式错误');
//                return ;
//            }

            if(orginazition == ''){
                alert('举办方不能为空');
                return;
            }

            if(imageFieName == ''){
                imageFieName = -1;
            }

            $.ajax({
                url:"{:U('Route/editRouteSave')}",
                type:'POST',
                dataType:'json',
                data:{
                    'id'            :   id,
                    'name'          :   name,
//                    'start_time'    :   start_time,
//                    'end_time'      :   end_time,
                    'num'           :   parseInt(num),
                    'orgnazition'   :   orginazition,
                    'image_name'    :   imageFieName,
                    'text'          :   editor.getContent(),
                    'status'        :   status,
                    'sort'          :   sort
//                    'model'         :   model

                },success:function(json){
                    alert(json);
                    window.location.href='{:U(\'Route/listPage\')}';
                }
            });
        }

        var $_GET = (function(){
            var url = window.document.location.href.toString();
            var u = url.split("?");
            if(typeof(u[1]) == "string"){
                u = u[1].split("&");
                var get = {};
                for(var i in u){
                    var j = u[i].split("=");
                    get[j[0]] = j[1];
                }
                return get;
            } else {
                return {};
            }
        })();

        function openModal(id){
            model = $('#model').val();
            $('#routeMessage').attr('src',"{:U('Home/Route/readRoute')}?id="+id+"&mo="+model+"&url="+img);
            $('#showMessage').modal().css({
                width: "100%",
                height: "100%"
            });
            $('#showMessage').modal({ show: true, backdrop: 'static' });

        }

        function changemodel(id){

            model = $('#model').val();

            $('#open').attr('href',"{:U('Home/Route/readRoute')}?id="+id+"&mo="+model+"&url="+img);

        }
    </script>
</block>